<template>
	<view class="bg">
		<ttBar leftIcon="icon-back" title="订单详情" >
			<template v-slot:rightCnt v-if="orderData.status==2 || orderData.status==4 || orderData.status==5 || orderData.status==9">
				<text class="iconfont icon-share rIcon" @tap="share"></text>
			</template>
		</ttBar>
		<view class="statusBox" v-if="orderData.status==8">
			<text>该订单已超时关闭</text>
		</view>

		<view class="statusBox" v-if="(orderData.status==1||orderData.status==3)">
			<text class="iconfont icon-daojishi"></text>
			<text>{{djsText}}</text>
		</view>

		<view class="dtList">
			<view class="dtItem orderItem">
				<view class="shopBox">
					<text class="iconfont icon-shoucangdianjia" @tap="toShop"></text>
					<text class="shopName" @tap="toShop">{{orderData.store.name}}</text>
				</view>
				<view class="goodBox">
					<image class="goodImg" :src="orderData.img" @tap="toGood"></image>
					<view class="infoBox">
						<text class="goodName" @tap="toGood">{{orderData.name}}</text>
						<view class="fuwuBox">
							<button class="orderOp" v-for="(item,index) in goodInfo.protectList" :key="index">{{item.name}}</button>
						</view>

						<text class="price">￥{{orderData.total}}</text>
					</view>
				</view>

				<block v-if="orderData.status==1||orderData.status==2 ||orderData.status==3">
					<view class="priceBox">
						<text>{{daifu[orderData.status]}}:</text>
						<text class="payAmount">￥{{orderData.payAmount}}</text>
					</view>
					<view class="priceBox" v-if="orderData.status==2">
						<text>已付预约金:</text>
						<text class="payAmount">￥{{orderData.prepay}}</text>
						<text class="payStatus">已付</text>
					</view>
				</block>
				<block v-if="orderData.status==4 ||orderData.status==5 ||orderData.status==9">
					<view class="priceBox">
						<text>已支付:</text>
						<block v-if="orderData.discount>0">
							<text class="payAmount">￥{{orderData.payStatus!=1?(orderData.price - orderData.discount).toFixed(2):orderData.prepay}}</text>
						</block>
						<block v-else>
							<text class="payAmount">￥{{orderData.payStatus!=1?orderData.price:orderData.prepay}}</text>
						</block>
						<text class="payStatus">已付</text>
					</view>
				</block>
				<block v-if="orderData.status==6 ||orderData.status==7">
					<view class="priceBox">
						<text>已支付:</text>
						<block v-if="orderData.discount>0">
							<text class="payAmount">￥{{orderData.payStatus!=1?(orderData.price - orderData.discount).toFixed(2):orderData.prepay}}</text>
						</block>
						<block v-else>
							<text class="payAmount">￥{{orderData.payStatus!=1?orderData.price:orderData.prepay}}</text>
						</block>
						<text class="payStatus">已付</text>
					</view>
				</block>


				<view class="opBox">
					<button v-if="orderData.groupId" @tap="toPage" data-url="myGroupDetail" :data-id="orderData.groupId" :data-stay="orderData.status">拼团详情</button>
					<!-- <button>交易快照</button> -->
					<button v-if="(orderData.status==2||orderData.status==4||orderData.status==5 )&& canRefound" @tap="toRefound">申请退款</button>
					<button v-if="orderData.status==1" @tap="toPay">付预约金</button>
					<button v-if="orderData.status==2" @tap="toWeikuan">付尾款</button>
					<button v-if="orderData.status==3" @tap="toPay">付全款</button>
					
					<button v-if="orderData.status==6 ||orderData.status==7" @tap="toPage" data-url="refoundDt" :data-oid="orderData.order_id"
					 :data-rid="orderData.refundId">退款详情</button>
				</view>
			</view>
			<view class="dtItem lxrBox">
				<image src="../../static/renyuan.png"></image>
				<text>{{orderData.member?orderData.member.name:''}}</text>
				<text>联系电话:{{orderData.member?orderData.member.phone:''}}</text>
			</view>
			<view class="dtItem" v-if="(orderData.status==2||orderData.status==4) && orderData.tri==1 && (!orderData.tryTime)">
				<experience-code v-if="goodInfo.courseType!='1'" :orderInfo="orderData"></experience-code>
				<xiaofei-code v-if="goodInfo.courseType=='1'" :orderInfo="orderData"></xiaofei-code>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">联系信息</text>
				<view class="shopBox shopCard">
					<image class="brandImg" :src="orderData.store.logo?orderData.store.logo:'../../static/loding.png'" @tap="toShop"></image>
					<view class="cardInfo" data-url="shopDetail" @tap="toShop">
						<text class="shopName">{{orderData.store.name}}</text>
						<text class="shopAddress">{{orderData.store.address}}</text>
					</view>
					<view class="shopBtn">
						<image src="../../static/msg.png" @tap="toTIM"></image>
						<image src="../../static/dianhua.png" @tap="call"></image>
					</view>
				</view>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">订单信息</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">课程价格：</text>
						<text class="val">￥{{orderData.total}}</text>
					</view>
					<view class="row">
						<text class="label">订单总计：</text>
						<text class="val">￥{{(orderData.total-orderData.discount).toFixed(2)}}</text>
					</view>
					<block v-for="(item,index) in orderData.coupons" :key="index" v-if="orderData.coupons.length>0">
						<view class="row">
							<text class="label">{{typeArr[item.coupon.source]}}：</text>
							<text class="val">￥{{item.coupon.discount}}</text>
						</view>
					</block>
					<view class="row">
						<text class="label">订单编号：</text>
						<text class="val">{{orderData.orderNo}}</text>
					</view>
					<view class="row">
						<text class="label">创建时间：</text>
						<text class="val">{{orderData.createTime}}</text>
					</view>
					
				</view>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">平台客服</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">客服电话：</text>
						<text class="val">025-84583336</text>
					</view>
					<view class="row">
						<text class="label">工作时间：</text>
						<text class="val">每天9:00 - 22:00</text>
					</view>
				</view>
			</view>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
		<shareAction ref="shareAction" :id="goodInfo.id" :type="6"></shareAction>
	</view>
</template>

<script>
	import COMM from "@/common/common.js";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import experienceCode from "@/components/experienceCode/experienceCode.vue";
	import xiaofeiCode from "@/components/experienceCode/xiaofeiCode.vue";
	import shareAction from "@/components/shareAction/shareAction.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,
			experienceCode,
			shareAction,
			xiaofeiCode
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				orderData: {
					status: 0,
					store: {
						name: '店铺名'
					}
				},
				isTimeOut: false,
				goodInfo: {
					protectList: [{
						"id": 1,
						"name": "未消费退款",
						"percent": 1
					}]
				},
				id: 0,
				daifu: ['', '待付预约金', '待付尾款', '待付全款'],
				djsText:'',
				typeArr:['','牛牛券','优惠券'],
				canRefound:true,
			};
		},
		methods: {
			getData() {
				this.$store.dispatch('apiGetOrderDt', {
					orderNo: this.id
				}).then(res => {
					this.orderData = res.data.data
					this.daojishi();
					this.$store.dispatch("apiGetGoodDetailById", {
						id: res.data.data.courseId,
						userId: this.userInfo.userId
					}).then(goodRes => {
						this.goodInfo = goodRes.data.data
						this.canRefound=this.goodInfo.returnFundIds?false:true
					})
				})

			},
			toPay() {
				this.$store.dispatch("apiGetGoodDetailById", {
					id: this.goodInfo.id,
					userId: 0
				}).then(res => {
					if (res.data.data.isDelete) { //已删除
						this.$refs.hkModal.init({
							title:'支付失败',
							cntText:'该课程已删除，无法购买',
							cancle:'',
							confirm:'确认',
							maskClose:true,
							cancleFcn:null,
							confirmFcn:null,
						})
						this.$refs.hkModal.show()
					} else {
						if (res.data.data.running != 1) { //已下架
							this.$refs.hkModal.init({
								title:'支付失败',
								cntText:'该课程已下架，无法购买',
								cancle:'',
								confirm:'确认',
								maskClose:true,
								cancleFcn:null,
								confirmFcn:null,
							})
							this.$refs.hkModal.show()
						} else {
							this.toPage({
								url: 'pay',
								id: this.orderData.orderNo
							})
						}
					}
				}).catch(res => {
					this.$refs.hkModal.init({
						title:'支付失败',
						cntText:'该课程已删除，无法购买',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				})
				
			},
			toWeikuan() {
				this.$store.dispatch("apiGetGoodDetailById", {
					id: this.goodInfo.id,
					userId: 0
				}).then(res => {
					if (res.data.data.isDelete) { //已删除
						this.$refs.hkModal.init({
							title:'支付失败',
							cntText:'该课程已删除，无法购买，请申请退',
							cancle:'',
							confirm:'确认',
							maskClose:true,
							cancleFcn:null,
							confirmFcn:null,
						})
						this.$refs.hkModal.show()
					} else {
						if (res.data.data.running != 1) { //已下架
							this.$refs.hkModal.init({
								title:'支付失败',
								cntText:'该课程已下架，无法购买，请申请退',
								cancle:'',
								confirm:'确认',
								maskClose:true,
								cancleFcn:null,
								confirmFcn:null,
							})
							this.$refs.hkModal.show()
						} else {
							this.toPage({
								url: 'pay',
								id: this.orderData.orderNo,
								paytype: this.orderData.payType
							})
						}
					}
				}).catch(res => {
					this.$refs.hkModal.init({
						title:'支付失败',
						cntText:'该课程已删除，无法购买，请申请退',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				})
				
				
			},
			toShop() {
				this.toPage({
					url: 'shopDetail',
					id: this.orderData.store.id
				})
			},
			toGood() {
				this.toPage({
					url: 'goodDetail',
					id: this.orderData.courseId
				})
			},
			// 获取倒计时
			daojishi() {
				let time=this.orderData.left_paytime;
				if (time) {
					let leftTime = parseInt(time) * 1000
					let hours = parseInt(leftTime / 1000 / 60 / 60, 10); //计算剩余的小时
					let minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
					hours = checkTime(hours);
					minutes = checkTime(minutes);
					this.djsText =  hours + '小时' + minutes + '分钟后自动关闭'
				}else{
					
				}
				
				function checkTime(i) { //将0-9的数字前面加上0，例1变为01
					if (i < 10) {
						i = "0" + i;
					}
					return i;
				}
				
			},
			toRfdDt() {
				this.toPage({
					url: 'refoundDt',
					oid: this.orderData.order_id
				})
			},
			toTIM() {
				let _this = this;
				if (this.isLogin) {
					uni.showLoading({
						title: '',
						mask: false
					});
					this.$store.dispatch("apiPostTongji", {
						storeId: this.goodInfo.store.id,
						type: 2,
						userId: this.userInfo.userId
					})
					let toImid = _this.orderData.store.imid;
					if (getApp().globalData.TIM_SDK_READY) {
						uni.hideLoading()
						_this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid,
							sname: _this.goodInfo.store.name,
							slogo: _this.goodInfo.store.logo,
							sid: _this.goodInfo.store.id,
						})
					} else {
						_this.$store.dispatch("timLogin", _this.userInfo.imid).then(res => {
							setTimeout(() => {
								uni.hideLoading()
								_this.toPage({
									url: 'conversationDt',
									cvid: 'C2C' + toImid,
									toImId: toImid,
									sname: _this.goodInfo.store.name,
									slogo: _this.goodInfo.store.logo,
									sid: _this.goodInfo.store.id,
								})
							}, 1000)

						})
					}
				} else {
					this.toPage("login")
				}
			},
			call() {
				COMM.callPhone(this.orderData.store.phone);
			},
			toRefound() {
				this.toPage({
					url: 'applyRefound',
					orderId: this.orderData.order_id,
					orperId: this.userInfo.userId,
					status: this.orderData.status,
				})
			},
			share(){
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=goodDetail&id='+this.goodInfo.id+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=goodDetail&id='+this.goodInfo.id
				}
				this.$refs.shareAction.setShareData({
					title:this.goodInfo.name,
					img:this.goodInfo.img?this.goodInfo.img:'http://s.de123.com/kf.png',
					href:_href,
					cntText:''
				})
				this.$refs.shareAction.open()
			},
		},
		onLoad(cfm) {
			this.id = cfm.id
			this.getData()
			uni.$on("shuxingOrder", () => {
				this.getData()
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.bg {
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
	}

	.statusBox {
		height: 100upx;
		padding: 0 50upx;
		line-height: 100upx;
		color: #FFFFFF;
		background-color: #ffb81d;

		text {
			font-size: 28upx;
		}

		.iconfont {
			font-size: 36upx;
			margin-right: 20upx;
		}
	}

	.dtList {
		display: flex;
		flex-direction: column;
		padding: 18upx;
	}

	.dtItem {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		margin-bottom: 18upx;
	}

	.orderItem {
		display: flex;
		flex-direction: column;
		padding: 36upx 20upx 36upx 36upx;

		.shopBox {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 36upx;
			}

			.icon-shoucangdianjia {
				color: #202932;
				margin-right: 6upx;
			}

			.icon-right {
				color: #c9c9c9;
			}

			.orderStatus {
				color: #ffb423;
				font-size: 32upx;
				margin-top: -4upx;
				flex-grow: 1;
				text-align: right;
			}

			.shopName {
				font-size: 32upx;
				color: #202932;
				margin-top: -4upx;
			}
		}

		.goodBox {
			display: flex;
			margin-top: 32upx;
			padding-bottom: 20upx;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 10upx;

			.goodImg {
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
				flex-shrink: 0;
			}

			.infoBox {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}

			.fuwuBox {
				display: flex;
				flex-wrap: wrap;

			}

			.goodName {
				font-size: 28upx;
				color: #202932;
			}

			.priceBox {
				display: flex;
				color: #202932;
				font-size: 28upx;
				align-items: baseline;
			}

			.orderOp {
				height: 34upx;
				line-height: 30upx;
				font-size: 24upx;
				color: #ffa023;
				border-radius: 16upx;
				padding: 0 20upx;
				border: 1px solid #ffa023;
				background-color: rgba(0, 0, 0, 0);
				margin: 0;
				margin-right: 10upx;
				margin-bottom: 10upx;
			}

			.orderOp:after {
				outline: none;
				border: none;
			}

			.price {
				color: #202932;
				font-weight: bold;
				font-size: 28upx;
			}
		}

		.priceBox {
			display: flex;
			align-items: center;
			font-size: 32upx;
			padding: 10upx 0;

			.payStatus {
				height: 30upx;
				line-height: 30upx;
				padding: 0 10upx;
				color: #FFFFFF;
				font-size: 20upx;
				background-color: #ffb852;
				border-radius: 3rpx;
				margin-left: 10upx;
			}

			.payAmount {
				color: #ff2020;
				font-weight: bold;
			}
		}

		.opBox {
			display: flex;
			padding-top: 20upx;
			justify-content: flex-end;

			button {
				height: 50rpx;
				line-height: 48upx;
				border-radius: 25rpx;
				border: solid 1rpx #dfdfdf;
				background-color: rgba(0, 0, 0, 0);
				color: #989898;
				font-size: 28upx;
				padding: 0 24upx;
				margin: 0;
				margin-left: 40upx;

			}

			button:after {
				border: none;

			}
		}

	}

	.boxTitle {
		padding: 18upx 20upx 18upx 36upx;
		color: #202932;
	}

	.lxrBox {
		display: flex;
		align-items: center;
		font-size: 32upx;
		padding: 36upx 20upx 36upx 36upx;

		image {
			width: 46upx;
			height: 46upx;
			margin-right: 20upx;
		}

		text {
			margin-right: 20upx;
		}
	}

	.shop {
		display: flex;
		flex-direction: column;
	}

	.shopCard {
		background-color: #FFFFFF;
		padding: 30upx 36upx;
		border-bottom: 13upx solid #f4f4f4;
		display: flex;
		align-items: center;

		.brandImg {
			width: 100upx;
			height: 100upx;
			margin-right: 30upx;
		}

		.cardInfo {
			flex: 1;
			display: flex;
			flex-direction: column;

			.shopName {
				font-size: 26rpx;
				color: #202932;
			}

			.shopAddress {
				margin-top: 14upx;
				font-size: 24rpx;
				color: #838890;
			}
		}

		.shopBtn {
			flex-shrink: 0;
			display: flex;

			image {
				width: 40upx;
				height: 40upx;
				margin-left: 36upx;
			}
		}
	}

	.rowBox {
		display: flex;
		flex-direction: column;
		padding: 18upx 20upx 18upx 36upx;

		.row {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #666666;
			margin-bottom: 10upx;
		}
	}
	.rIcon{
		font-size: 40upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		margin-right: -10upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
		
	}
</style>
